@use "sass:color";

/*
 * Secondary menu
 */
%secmenu-wet-theme-menuitem-curr-hover-focus {
	background: color.adjust($clrWhite, $lightness: -60%, $space: hsl);
	color: color.adjust($clrDark, $lightness: 75%, $space: hsl);
}

#wb-sec {
	margin-top: 20px;
	padding-bottom: 2em;

	h3 {
		border: 1px solid $wb-sec-h3-border;
		border-bottom: 3px solid $wb-sec-h3-border-bottom;
		font-size: 1em;
		margin: 0;
		padding: 15px;

		a {
			color: $wb-sec-h3-a-color;
			text-decoration: none;
		}
	}

	.list-group {
		margin-bottom: 0;

		a {
			&.list-group-item {
				background: $clrWhite;
				border-radius: 0;
				color: $clrDark;
				margin-top: -1px;
				text-decoration: none;

				&.wb-navcurr {
					@extend %secmenu-wet-theme-menuitem-curr-hover-focus;
				}

				&[href] {
					&:hover,
					&:focus {
						@extend %secmenu-wet-theme-menuitem-curr-hover-focus;
					}
				}
			}
		}

		.list-group {
			.list-group-item {
				background: color.adjust($clrWhite, $lightness: -10%, $space: hsl);
				color: color.adjust($clrDark, $lightness: -50%, $space: hsl);
				padding-left: 1.8em;
			}
		}
	}
}

[dir="rtl"] {
	#wb-sec {
		.list-group {
			.list-group {
				.list-group-item {
					padding-left: 15px;
					padding-right: 1.8em;
				}
			}
		}
	}
}
